<template>
  <div class="status-button" :style="style">{{ title }}</div>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  textColor: {
    type: String,
    default: 'var(--el-color-text-primary)'
  },
  fontSize: {
    type: String,
    default: '13px'
  },
  fontWeight: {
    type: Number,
    default: 700
  },
  backgroundColor: {
    type: String,
    default: 'var(--el-fill-color-darker)'
  }
})

function click() {
  console.log('click the status')
}

const style = computed(() => {
  return {
    color: props.textColor,
    fontSize: props.fontSize,
    fontWeight: props.fontWeight,
    backgroundColor: props.backgroundColor
  }
})
</script>

<style setup>
.status-button {
  border-radius: 4px;
  padding: 0 5px;
  -webkit-user-select: none;
  user-select: none;
}
</style>
